<template>
  <div class="message" :style="propStyle">
    <vue-scroll ref="scrollRef" class="msg-scroll" :ops="scrollOptions" @scroll="scrollEvent">
      <div class="msg flex flex-column" id="msg-area">
        <el-popover
            placement="bottom-start"
            width="140"
            trigger="click"
            v-for="(item, index) in messageList"
            :key="index"
        >
          <pers-button type="danger" size="mini" icon="el-icon-delete"
                       @click="delLexicon(item)" perms="screen:control:lexicon:del" label="删除"></pers-button>
          <div slot="reference" :class="['msg-item', `msg-length-${index}`]">
            <span class="msg_icon_key" :data-id="item.id">{{ item.group_name }}</span>
            <span class="username" :data-id="item.id">{{ item.name }}</span>
            {{ item.msg }}
          </div>
        </el-popover>
      </div>
        
    </vue-scroll>
  </div>
</template>

<script>
import PersButton from "@/components/PersButton.vue";

export default {
  name: 'LiveLexicon',
  components: {PersButton},
  props: {
    nickname: {
      type: String,
      default: '默认用户'
    },
    messageList: {
      type: Array,
      default: () => []
    },
    propStyle: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      msgMask: null,
      // messageList: [],
      scrollTop: 0,
      scrollOptions: {
        scrollY: true,
        bar: {
          backgroundColor: '#f5f5f5', // 滚动条背景色
          opacity: 0.6, // 滚动条透明度
        },
      }
    }
  },
  mounted() {
    this.toLower();
  },
  updated() {
    this.toLower();
  },
  methods: {
    toLower() {
      const msgLength = this.$refs.scrollRef.$el.querySelector('.msg-length-' + (this.messageList.length - 1));
      this.$refs.scrollRef.scrollIntoView(msgLength, 50);
      // this.$refs.scrollRef.scrollToBottom();
    },
    scrollEvent(e) {
      this.msgMask = e.detail.scrollTop > 0;
    },
    sendMsg(message, nickname, userId, text, num = '') {
      this.messageList.push({
        nickname: nickname,
        msg: message,
        id: userId,
        num: num,
        icon_text: text,
        silence: false,
        hide_msg: false
      });
      // this.scrollToLower();
    },
    //滚动到底部
    scrollToLower() {
      setTimeout(() => {
        this.$nextTick(() => {
          const scrollWrapper = this.$refs.scroll.$el.querySelector('.vs__content-wrapper');
          scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
        });
      }, 50);
    },
    //删除词库
    delLexicon(row) {
      console.log('删除-Lexicon', row)
      this.$confirm(`是否删除【${row.name}】？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delLexicon', row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁言'
        });
      })
    },
    //添加词库
    addLexicon(row) {
      console.log('禁言-Lexicon', row)
      this.$emit('addLexicon', row);
    }
  }
}
</script>

<style lang="scss" scoped>
.message {
  width: 100%;
  height: 467px; /* 设置容器高度以触发滚动 */
  overflow: hidden; /* 隐藏默认滚动条 */
  text-align: left;

  .msg-scroll {
    /* height: 400px; */

    &.mask {
      -webkit-mask: -webkit-gradient(linear, left 30%, left top, from(#000), to(transparent));
    }

    .msg-item {
      background: var(--live-background);
      color: #ccc;
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 20px;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
      align-self: flex-start;
      transition: opacity 0.3s ease;

      image {
        height: 36px;
        margin-right: 5px;
        vertical-align: middle;
      }

      .username {
        font-weight: 500;
        color: #77c4bc;
      }

      .msg_icon {
        border-radius: 30px;
        border: 1px solid #af4545;
        background-color: rgba(175, 69, 69, 1);
        padding: 0 7px;
        color: white;
        margin-right: 2px;
        font-size: 12px;
      }

      .msg_icon_num {
        border-radius: 30px;
        border: 1px solid #4579af;
        background-color: rgba(69, 121, 175, 1);
        padding: 0 7px;
        color: white;
        margin-right: 2px;
        font-size: 12px;
      }

      .msg_icon_key {
        border-radius: 30px;
        border: 1px solid #c8b43c;
        background-color: rgba(200, 180, 60, 1);
        padding: 0 7px;
        color: white;
        margin-right: 2px;
        font-size: 12px;
      }

      &.system {
        color: #77c4bc;
      }
    }
  }
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-popper {
  margin-top: 12px;
  text-align: center;
}
</style>